<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
       <style>
		.box{width:290px;height:70px;border-radius:10px;border:1px solid black;}
		.box div{float:left;margin-left:20px;width:45px;height: 45px;border-radius: 45px;border:1px solid purple;margin-top: 10px;}
		.box .count{width: 60px;border: 0px;font-size: 280%;}
		.red{background-color:red ;}
		.yellow{background-color: yellow;}
		.green{background-color: green;}
	</style>

</head>
<body>
    <body>
		<div class="box">
			<div id="red"></div> 
			<div id="yellow"></div> 
			<div id="green"></div>
			<div id="count" class="count"></div> 
		</div>

</body>
<script>
        var lamp={
				red:{  
					obj:document.getElementById("red"),					
					timeout:30,
					style:['red','gray','gray'],
					next:'green'
				},
				yellow:{  
					obj:document.getElementById("yellow"),
					timeout:5,
					style:['gray','yellow','gray'],					
					next:'red'
				},
				green:{  
					obj:document.getElementById("green"),
					timeout:35,
					style:['gray','gray','green'],					
					next:'yellow'
				},
				changeStyle(style){  
					this.red.obj.className=style[0];
					this.yellow.obj.className=style[1];
					this.green.obj.className=style[2];
				}				
			};
                var count={
				obj:document.getElementById('count'), 
				change:function(num){
					this.obj.innerHTML=(num<10)?('0'+num):num;
				}
			};
                var now=lamp.green;        
			var timeout=now.timeout;      
			lamp.changeStyle(now.style);  
			count.change(timeout);       

            setInterval(function(){
				if(--timeout<=0){         
					now=lamp[now.next];   
					timeout=now.timeout;  
					lamp.changeStyle(now.style); 
				}
				count.change(timeout);   
			},1000);
			


</script>
</html>